<template>
	<view class="box">
		<!-- <u-calendar @change="change" v-model="data_show" :mode="range">
			<view slot="tooltip">
				<view class="title">
					请选择开始和结束时间
				</view>
			</view>
		</u-calendar>

		<view class="data_css">
			<view @click="data_btn" class="left">
				日期：<text>{{stime+'至'+etime}}</text>
			</view>
			<view class="right">
				累计：<text style="color: red;font-weight: 700;">{{totalMoney}}￥</text>
			</view>
		</view> -->
		<ListTools style="display: flex;" :total="count" :sedate="{st: stime, et: etime}" @selDate="selAlSeDate">

		</ListTools>
		<view style="display: flex;width:100% ; height:4vh;align-items: center;justify-content: space-evenly;">

			<u-button size="mini" type="error" plain>总佣金：{{totalMoney}}￥</u-button>
			<u-button size="mini" type="success" plain>已发佣金：{{paidMoney}}￥</u-button>
			<u-button size="mini" type="warning" plain>未发佣金：{{notPaidMoney}}￥</u-button>

		</view>
		<view style="height: 85vh;overflow: auto;">
			<view class="wallet-list">
				<view class="wl-item" style="margin: 10rpx 0rpx;" v-for="(it, index) in dataList" :key="it.id">
					<view class="it-row" style="display: flex;justify-content: space-between;">
						<view class="ir-title" :style="it.staffReimburseId?'color:red':'' "
							style="width: 80%;margin-left: 20rpx;">{{it.staffReimburseId?"工资已发放":it.note}}</view>
						<view style="margin-right: 20rpx;" class="ir-money c-yellow">

							￥{{'+'+it.amoney }}
						</view>
					</view>

					<view class="it-row" style="display: flex;justify-content: space-between;">
						<view class="ir-datetime" style="margin-left: 20rpx;">{{it.addTime }}
						</view>
						<view v-if="it.mergeMarkindex"
							style="font-size: 30rpx;font-weight: 700; background-color: yellow;padding: 5rpx;15rpx">
							合并订单:{{it.mergeMarkindex}}号</view>

						<view style="margin-right: 20rpx;" class="ir-currbalance">余额 ￥{{it.cashBalance }}</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import ListTools from '@/components/list-tools/list-tools.vue';
	export default {
		components: {
			ListTools,
		},
		onPullDownRefresh() {
			let that = this

			that.queryList()
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000);
		},
		data() {
			return {
				count: 0,
				data_show: false,
				dataList: [],
				// 开始时间
				stime: this.U.getMonthFirstDay(new Date(), 1).split(' ')[0] + ' ' + '00:00:00',
				// 结束时间
				etime: this.U.getMonthLastDay(new Date(), 1).split(' ')[0] + ' ' + '23:59:59',
				totalMoney: "0",
				paidMoney: '0',
				notPaidMoney: '0',
			}
		},
		onLoad() {
			// let date = new Date()
			// let y = date.getFullYear()
			// let m = date.getMonth() + 1
			// let d = date.getDate();
			// m = (m > 9) ? m : ("0" + m);
			// d = (d < 10) ? ("0" + d) : d;
			// // 出发时间：默认当前时间点

			// let time = y + '-' + m + '-' + d
			// this.stime = time
			// this.etime = time
			this.queryList()
		},
		methods: {
			selAlSeDate(e) {
				// console.log('起止日期选择事件', e);
			
				this.stime = e.st;
				this.etime = e.et;
			
				// 重新查询
				this.queryList();
			},
			change(e) {
				console.log(e);
				this.stime = e.startDate
				this.etime = e.endDate
				this.queryList()
			},
			data_btn() {
				this.data_show = true
			},

			// 查询数据
			queryList(pageNo, pageSize) {
				const that = this,
					U = that.U;

				const params = {
					// page: 1,
					// rows: 20,
					// stime: that.stime,
					// etime: that.etime,
					// atype: 10,
					// types: 17,
					page: {
						pageNum: 1,
						pageSize: 999,
					},
					balType: 'SALARY_BALANCE',
					// payType: 'SALARY',
					tradeStatus: 'INCOME',
					stime: that.stime,
					etime: that.etime,
				}
				console.log(params)
				that.$u.api.getLWalletList(params).then(res => {
					if (res.code != 1) {
						U.qinfo(res.msg);
					} else {
						that.count = res.data.list.total
						//将请求的结果数组传递给z-paging
						that.dataList = res.data.list.list
						let new_list = that.dataList
						let indxe = 1
						let mergeMark_list = []
						for (let i = 0; i < new_list.length; i++) {
							if (new_list[i].assist) {
								mergeMark_list.push(new_list[i].assist)
							}
						}

						for (let i = 0; i < mergeMark_list.length - 1; i++) {
							for (let j = i + 1; j < mergeMark_list.length; j++) {
								if (mergeMark_list[i] == mergeMark_list[j]) {
									mergeMark_list.splice(j, 1)
									j--
								}
							}
						}

						for (let a = 0; a < new_list.length - 1; a++) {
							if (new_list[a].assist) {
								for (let b = 0; b < mergeMark_list.length; b++) {
									if (new_list[a].assist = mergeMark_list[b]) {
										new_list[a].mergeMarkindex = b + 1
									}
								}
							}

						}

						that.dataList = new_list
						that.totalMoney = res.data.statics.totalMoney
						that.paidMoney = res.data.statics.operMoney
						that.notPaidMoney = res.data.statics.notOperMoney
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	.ir-money{
		font-weight: 700;
		
	}
	.ir-title{
		color: #150909cc;
	}
	.ir-datetime{
		font-weight: 700;
		
	}
	.ir-currbalance{
		font-weight: 700;
		color: red;
	}
	.wallet-list{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.wl-item{
		background-color: #a5a5a59e;
		padding: 10rpx 0rpx;
		border-radius: 8rpx;
		width: 95%;
		
	}
	.title {
		color: red;
		text-align: center;
		padding: 20rpx 0 0 0;
	}

	.box {
		background-color: #fff;
		width: 100vw;
		height: 100vh;

		.data_css {
			height: 100rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				margin-left: 20rpx;
				border: 2px solid #00C3CE;
				padding: 5rpx 10rpx;
			}

			.right {
				margin-right: 20rpx;

			}
		}
	}
</style>